<template>
  <div class="user-add">
    <el-row>
      <el-col :span="16">
        <!--        表单-->
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
          <!--          规格名称-->
          <el-form-item label="规格名称" prop="specsname">
            <el-input v-model="form.specsname"></el-input>
          </el-form-item>
          <!--          添加规格-->
          <el-form-item
            v-for="(item, index) in specsArr"
            :label="'规格属性'"
            :key="index">
            <el-input v-model="item.value"></el-input>
            <el-button @click="addSpecs" v-if="index == 0">新增规格</el-button>
            <el-button @click.prevent="removeSpecs(item)" v-else>删除</el-button>
          </el-form-item>

          <!--            状态-->
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="2"
              active-color="#f00"
              inactive-color="#eee"
            ></el-switch>
          </el-form-item>
          <el-form-item v-if="typeof $route.params.id == 'undefined'">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "vUserAdd",
    mounted() {
      //请求单个菜单详情 判断是否有id参数
      if (this.$route.params.id) {//有
        this.axios({
          url: '/api/specsinfo',
          params: {id: this.$route.params.id},
          method: 'get'
        }).then(res => {
          this.form = res.list[0]
          var arr = []
          this.form.attrs.forEach(item => {
            var obj = {}
            obj.value = item
            arr.push(obj)
          })
          this.specsArr = arr
          this.form.id = this.$route.params.id //手动添加上id 提交时需要
        })
      }
    },
    data() {
      return {
        form: {
          specsname: '',
          attrs: '',
          status: 1
        },
        rules: {
          pid: [
            {required: true, message: '请选择菜单', trigger: 'blur'}
          ],
          specsname: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        },
        specsArr: [{value: ''}]
      }
    },
    computed: {
      ...mapState(['specsList'])
    },
    methods: {
      //新增规格
      addSpecs() {
        if(this.specsArr.length <5) {
          this.specsArr.push({value: ''});
        }
      },
      //删除规格
      removeSpecs(item) {
        var index = this.specsArr.indexOf(item)
        if (index !== -1) {
          this.specsArr.splice(index, 1)
        }
      },
      //取消后退功能
      handleCancal() {
        this.$router.go(-1)
      },
      //提交表单功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加/修改该商分类?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              var arr = this.specsArr.map(item => {
                return item.value
              })
              this.form.attrs = arr.join(',')
              let url = ''
              if (this.$route.params.id) {
                url = '/api/specsedit'
              } else {
                url = '/api/specsadd'
              }
              this.axios({
                method: 'post',
                url: url,
                data: this.form
              }).then(res => {
                if (res.code == 200) {
                  this.$store.dispatch('updatespecs')
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                  this.$router.go(-1)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                }
              })
            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消操作'
                });
              });
          } else {
            this.$message({
              type: 'info',
              message: '信息填写错误'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .el-input{
    width: 70%;
  }
</style>
